<html lang="en">

<head>
  <style>
    html {
      font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto
    }

    html,
    body {
      width: 100vw;
      height: 100vh;
      display: flex;
      background-color: rgb(54, 50, 119);
      align-items: center;
      justify-content: center;
      color: #fafafa;
    }

    .loading {
      text-align: center;
    }
  </style>

</head>

<body>
  <div class="loading">
    <div>
      <img
        src="" />
      <img
        src="" />
    </div>
    <h3>Loading &laquo; scrollspy - navbar &raquo; demo</h3>
  </div>
  <form id="mainForm" method="post" action="https://stackblitz.com/run?file=app/scrollspy-navbar.ts" target="_self">
    <input type="hidden" name="project[template]" value="angular-cli">
    <input type="hidden" name="project[title]" value="ng-bootstrap demo - Scrollspy - Navbar">
    <input type="hidden" name="project[description]"
      value="Example usage of the scrollspy widget from https://ng-bootstrap.github.io">
    <input type="hidden" name="project[dependencies]" value="{&#34;@angular/animations&#34;:&#34;~16.0.0&#34;,&#34;@angular/core&#34;:&#34;~16.0.0&#34;,&#34;@angular/common&#34;:&#34;~16.0.0&#34;,&#34;@angular/compiler&#34;:&#34;~16.0.0&#34;,&#34;@angular/compiler-cli&#34;:&#34;~16.0.0&#34;,&#34;@angular/platform-browser&#34;:&#34;~16.0.0&#34;,&#34;@angular/platform-browser-dynamic&#34;:&#34;~16.0.0&#34;,&#34;@angular/router&#34;:&#34;~16.0.0&#34;,&#34;@angular/forms&#34;:&#34;~16.0.0&#34;,&#34;@angular/localize&#34;:&#34;~16.0.0&#34;,&#34;@ng-bootstrap/ng-bootstrap&#34;:&#34;15.1.2&#34;,&#34;@popperjs/core&#34;:&#34;2.11.6&#34;,&#34;rxjs&#34;:&#34;~7.5.5&#34;,&#34;typescript&#34;:&#34;~5.0.4&#34;,&#34;zone.js&#34;:&#34;~0.13.0&#34;}">
    
    <input type="hidden" name="project[tags][]" value="angular">
    
    <input type="hidden" name="project[tags][]" value="bootstrap">
    
    <input type="hidden" name="project[tags][]" value="ng-bootstrap">
    
    <input type="hidden" name="project[tags][]" value="scrollspy">
    
    
    <input type="hidden" name="project[files][src/polyfills.ts]" value="/**
 * This file includes polyfills needed by Angular and is loaded before the app.
 * You can add your own extra polyfills to this file.
 *
 * This file is divided into 2 sections:
 *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 *      file.
 *
 * The current setup is for so-called &#34;evergreen&#34; browsers; the last versions of browsers that
 * automatically update themselves. This includes Safari &gt;= 10, Chrome &gt;= 55 (including Opera),
 * Edge &gt;= 13 on the desktop, and iOS 10 and Chrome on mobile.
 *
 * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
 */

/***************************************************************************************************
 * Zone JS is required by default for Angular itself.
 */
import &#39;zone.js&#39;; // Included with Angular CLI.

/***************************************************************************************************
 * APPLICATION IMPORTS
 */
import &#39;@angular/localize/init&#39;;
">
    
    <input type="hidden" name="project[files][tsconfig.json]" value="{
	&#34;compileOnSave&#34;: false,
	&#34;compilerOptions&#34;: {
		&#34;baseUrl&#34;: &#34;./&#34;,
		&#34;outDir&#34;: &#34;./dist/out-tsc&#34;,
		&#34;sourceMap&#34;: true,
		&#34;declaration&#34;: false,
		&#34;downlevelIteration&#34;: true,
		&#34;experimentalDecorators&#34;: true,
		&#34;moduleResolution&#34;: &#34;node&#34;,
		&#34;importHelpers&#34;: true,
		&#34;target&#34;: &#34;es2020&#34;,
		&#34;module&#34;: &#34;es2020&#34;,
		&#34;typeRoots&#34;: [&#34;node_modules/@types&#34;],
		&#34;lib&#34;: [&#34;es2020&#34;, &#34;dom&#34;]
	},
	&#34;angularCompilerOptions&#34;: {
		&#34;enableIvy&#34;: true,
		&#34;fullTemplateTypeCheck&#34;: true,
		&#34;strictTemplates&#34;: true,
		&#34;strictInjectionParameters&#34;: true
	}
}
">
    
    <input type="hidden" name="project[files][angular.json]" value="{
	&#34;version&#34;: 1,
	&#34;newProjectRoot&#34;: &#34;projects&#34;,
	&#34;projects&#34;: {
		&#34;demo&#34;: {
			&#34;root&#34;: &#34;&#34;,
			&#34;sourceRoot&#34;: &#34;src&#34;,
			&#34;projectType&#34;: &#34;application&#34;,
			&#34;prefix&#34;: &#34;app&#34;,
			&#34;schematics&#34;: {},
			&#34;architect&#34;: {
				&#34;build&#34;: {
					&#34;builder&#34;: &#34;@angular-devkit/build-angular:browser&#34;,
					&#34;options&#34;: {
						&#34;outputPath&#34;: &#34;dist/demo&#34;,
						&#34;index&#34;: &#34;src/index.html&#34;,
						&#34;main&#34;: &#34;src/main.ts&#34;,
						&#34;polyfills&#34;: &#34;src/polyfills.ts&#34;,
						&#34;tsConfig&#34;: &#34;tsconfig.json&#34;,
						&#34;assets&#34;: [],
						&#34;styles&#34;: [],
						&#34;scripts&#34;: []
					},
					&#34;configurations&#34;: {
						&#34;production&#34;: {
							&#34;fileReplacements&#34;: [{}],
							&#34;optimization&#34;: true,
							&#34;outputHashing&#34;: &#34;all&#34;,
							&#34;sourceMap&#34;: false,
							&#34;extractCss&#34;: true,
							&#34;namedChunks&#34;: false,
							&#34;aot&#34;: true,
							&#34;extractLicenses&#34;: true,
							&#34;vendorChunk&#34;: false,
							&#34;buildOptimizer&#34;: true
						}
					}
				},
				&#34;serve&#34;: {
					&#34;builder&#34;: &#34;@angular-devkit/build-angular:dev-server&#34;,
					&#34;options&#34;: {
						&#34;browserTarget&#34;: &#34;demo:build&#34;
					},
					&#34;configurations&#34;: {
						&#34;production&#34;: {
							&#34;browserTarget&#34;: &#34;demo:build:production&#34;
						}
					}
				},
				&#34;extract-i18n&#34;: {
					&#34;builder&#34;: &#34;@angular-devkit/build-angular:extract-i18n&#34;,
					&#34;options&#34;: {
						&#34;browserTarget&#34;: &#34;demo:build&#34;
					}
				},
				&#34;test&#34;: {
					&#34;builder&#34;: &#34;@angular-devkit/build-angular:karma&#34;,
					&#34;options&#34;: {
						&#34;polyfills&#34;: &#34;src/polyfills.ts&#34;,
						&#34;tsConfig&#34;: &#34;tsconfig.json&#34;,
						&#34;styles&#34;: [],
						&#34;scripts&#34;: [],
						&#34;assets&#34;: []
					}
				},
				&#34;lint&#34;: {
					&#34;builder&#34;: &#34;@angular-devkit/build-angular:tslint&#34;,
					&#34;options&#34;: {
						&#34;tsConfig&#34;: [&#34;tsconfig.json&#34;],
						&#34;exclude&#34;: [&#34;**/node_modules/**&#34;]
					}
				}
			}
		}
	},
	&#34;defaultProject&#34;: &#34;demo&#34;
}
">
    
    <input type="hidden" name="project[files][src/index.html]" value="&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
  &lt;title&gt;ng-bootstrap demo - Scrollspy - Navbar&lt;/title&gt;
  &lt;link rel=&#34;stylesheet&#34; href=&#34;https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css&#34; /&gt;
  &lt;link rel=&#34;stylesheet&#34; href=&#34;https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css&#34; /&gt;
  &lt;link rel=&#34;stylesheet&#34; href=&#34;https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/themes/prism.css&#34; /&gt;
  &lt;style&gt;
    /* Sortable table demo */

th[sortable] {
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
}

th[sortable].desc:before,
th[sortable].asc:before {
	content: &#39;&#39;;
	display: block;
	background: url(&#39;&#39;)
		no-repeat;
	background-size: 22px;
	width: 22px;
	height: 22px;
	float: left;
	margin-left: -22px;
}

th[sortable].desc:before {
	transform: rotate(180deg);
	-ms-transform: rotate(180deg);
}

/* Filtering table demo */
ngbd-table-filtering span.ngb-highlight {
	background-color: yellow;
}

/* Complete table demo */
ngbd-table-complete span.ngb-highlight {
	background-color: yellow;
}

ngb-carousel .picsum-img-wrapper {
	position: relative;
	height: 0;
	padding-top: 55%; /* Keep ratio for 900x500 images */
}

ngb-carousel .picsum-img-wrapper &gt; img {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

  &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;div class=&#34;container-fluid&#34;&gt;

    &lt;hr&gt;

    &lt;p&gt;
      This is a demo example forked from the &lt;strong&gt;ng-bootstrap&lt;/strong&gt; project: Angular powered Bootstrap.
      Visit &lt;a href=&#34;https://ng-bootstrap.github.io/&#34; target=&#34;_blank&#34;&gt;https://ng-bootstrap.github.io&lt;/a&gt; for more
      widgets and demos.
    &lt;/p&gt;

    &lt;hr&gt;
    &lt;ngbd-scrollspy-navbar&gt;&lt;/ngbd-scrollspy-navbar&gt;
  &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;
">
    
    <input type="hidden" name="project[files][src/main.ts]" value="import &#39;./polyfills&#39;;
import {provideHttpClient, withNoXsrfProtection} from &#39;@angular/common/http&#39;;
import {bootstrapApplication} from &#39;@angular/platform-browser&#39;;
import {NgbdScrollSpyNavbar} from &#39;./app/scrollspy-navbar&#39;;

bootstrapApplication(NgbdScrollSpyNavbar, {
  providers: [
    provideHttpClient(withNoXsrfProtection()),
  ],
})
.then(ref =&gt; {
  // Ensure Angular destroys itself on hot reloads.
  if (window[&#39;ngRef&#39;]) {
    window[&#39;ngRef&#39;].destroy();
  }
  window[&#39;ngRef&#39;] = ref;

  // Otherwise, log the boot error
})
.catch(err =&gt; console.error(err));
">
    
    <input type="hidden" name="project[files][src/app/scrollspy-navbar.html]" value="&lt;nav class=&#34;navbar bg-light px-3 mb-3&#34;&gt;
	&lt;span class=&#34;navbar-brand&#34;&gt;Navbar&lt;/span&gt;
	&lt;ul class=&#34;nav nav-pills&#34; [ngbScrollSpyMenu]=&#34;s&#34;&gt;
		&lt;li class=&#34;nav-item&#34;&gt;
			&lt;button class=&#34;nav-link&#34; ngbScrollSpyItem=&#34;basic-1&#34;&gt;First&lt;/button&gt;
		&lt;/li&gt;
		&lt;li class=&#34;nav-item&#34;&gt;
			&lt;button class=&#34;nav-link&#34; ngbScrollSpyItem=&#34;basic-2&#34;&gt;Second&lt;/button&gt;
		&lt;/li&gt;
		&lt;li ngbDropdown class=&#34;nav-item&#34;&gt;
			&lt;button ngbDropdownToggle class=&#34;nav-link&#34; ngbScrollSpyItem=&#34;basic-p1&#34;&gt;Dropdown&lt;/button&gt;
			&lt;ul ngbDropdownMenu&gt;
				&lt;li&gt;&lt;button ngbDropdownItem ngbScrollSpyItem=&#34;basic-3&#34; parent=&#34;basic-p1&#34;&gt;Third&lt;/button&gt;&lt;/li&gt;
				&lt;li&gt;&lt;button ngbDropdownItem ngbScrollSpyItem=&#34;basic-4&#34; parent=&#34;basic-p1&#34;&gt;Fourth&lt;/button&gt;&lt;/li&gt;
				&lt;li&gt;&lt;hr class=&#34;dropdown-divider&#34; /&gt;&lt;/li&gt;
				&lt;li&gt;&lt;button ngbDropdownItem ngbScrollSpyItem=&#34;basic-5&#34; parent=&#34;basic-p1&#34;&gt;Fifth&lt;/button&gt;&lt;/li&gt;
			&lt;/ul&gt;
		&lt;/li&gt;
	&lt;/ul&gt;
&lt;/nav&gt;

&lt;div ngbScrollSpy #s=&#34;ngbScrollSpy&#34; rootMargin=&#34;0px 0px -40%&#34; class=&#34;bg-light p-3 rounded-2 mb-3&#34; style=&#34;height: 200px&#34;&gt;
	&lt;h4 ngbScrollSpyFragment=&#34;basic-1&#34;&gt;First heading&lt;/h4&gt;
	&lt;p&gt;
		Raw denim you probably haven&#39;t heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master
		cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh
		dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum
		iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
	&lt;/p&gt;
	&lt;h4 ngbScrollSpyFragment=&#34;basic-2&#34;&gt;Second heading&lt;/h4&gt;
	&lt;p&gt;
		Raw denim you probably haven&#39;t heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master
		cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh
		dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum
		iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
	&lt;/p&gt;
	&lt;h4 ngbScrollSpyFragment=&#34;basic-3&#34;&gt;Third heading&lt;/h4&gt;
	&lt;p&gt;
		Raw denim you probably haven&#39;t heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master
		cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh
		dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum
		iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
	&lt;/p&gt;
	&lt;h4 ngbScrollSpyFragment=&#34;basic-4&#34;&gt;Fourth heading&lt;/h4&gt;
	&lt;p&gt;
		Raw denim you probably haven&#39;t heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master
		cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh
		dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum
		iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
	&lt;/p&gt;
	&lt;h4 ngbScrollSpyFragment=&#34;basic-5&#34;&gt;Fifth heading&lt;/h4&gt;
	&lt;p&gt;
		Raw denim you probably haven&#39;t heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master
		cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh
		dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum
		iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
	&lt;/p&gt;
&lt;/div&gt;
">
    
    <input type="hidden" name="project[files][src/app/scrollspy-navbar.ts]" value="import { Component } from &#39;@angular/core&#39;;
import { NgbDropdownModule, NgbScrollSpyModule } from &#39;@ng-bootstrap/ng-bootstrap&#39;;

@Component({
	selector: &#39;ngbd-scrollspy-navbar&#39;,
	standalone: true,
	imports: [NgbScrollSpyModule, NgbDropdownModule],
	templateUrl: &#39;./scrollspy-navbar.html&#39;,
})
export class NgbdScrollSpyNavbar {}
">
    
  </form>
  <script>document.getElementById("mainForm").submit();</script>
</body>

</html>
